<template>
	<view class="container">
		<!-- 进度条 -->
		<view class="progress-section">
			<uni-steps class="steps-box" :options="stepsOptions" :active="1" activeColor="#2979ff" />
		</view>
		
		<!-- 表单区域 -->
		<view class="form-section">
			<view class="section-title">
				<text class="title-text">我的资料</text>
			</view>
			
			<view class="form-content">
				<view class="form-item">
					<text class="label">姓名</text>
					<input class="input" v-model="formData.name" placeholder="请输入姓名" />
				</view>
				
				<view class="form-item">
					<text class="label">电话</text>
					<input class="input" v-model="formData.phone" type="number" placeholder="请输入手机号" maxlength="11" />
				</view>
				
				<view class="form-item">
					<text class="label">性别</text>
					<picker 
						class="picker" 
						:range="genderOptions" 
						range-key="label"
						:value="genderIndex"
						@change="handleGenderChange"
					>
						<view class="picker-text">{{genderIndex || '请选择性别'}}</view>
					</picker>
				</view>
				
				<view class="form-item">
					<text class="label">身份证号</text>
					<input class="input" v-model="formData.card_id" placeholder="请输入身份证号" @blur="handleIdCardBlur" />
				</view>
				
				<view class="form-item">
					<text class="label">生日</text>
					<picker class="picker" mode="date" :value="formData.birthday" @change="handleBirthdayChange">
						<view class="picker-text">{{formData.birthday || '请选择生日'}}</view>
					</picker>
				</view>
				
				<view class="form-item">
					<text class="label">年龄</text>
					<input class="input" v-model="formData.age" type="number" placeholder="请输入年龄" />
				</view>
				
				<view class="form-item">
					<text class="label">邮箱</text>
					<input class="input" v-model="formData.email" type="email" placeholder="请输入邮箱" />
				</view>
				
				<view class="form-item">
					<text class="label">下单地址</text>
					<textarea class="textarea" v-model="formData.address" placeholder="请输入详细地址" />
				</view>
				<view class="form-item">
					<text class="label">邮寄地址</text>
					<p></p>
					<!-- <textarea class="textarea" disabled="disabled" placeholder="" /> -->
					<text class="label">联系人:    张慧玲</text>
					<text class="label">联系电话:  13453166251</text>
					<text class="label">地址:  山西省太原市小店区龙兴街190号1015室2楼康斯亚森门诊部</text>
				</view>
			</view>
		</view>
		
		<!-- 底部按钮 -->
		<view class="footer">
		<!-- 	<view class="btn-group">
				<button size="mini" class="btn" @click="prevStep">上一步</button>
				<button size="mini" class="btn" type="primary" @click="nextStep">下一步</button>
			</view> -->
			<view class="uni-row" style="display: flex;">
				<view class="flex-item">
					<button class="btn prev-btn" type="default" @click="prevStep">上一步</button>
				</view>
				<view class="flex-item">
					<button class="btn next-btn" type="primary" @click="nextStep">下一步</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stepsOptions: [{
					title: '选择项目'
				}, {
					title: '填写信息'
				}, {
					title: '确认'
				}],
				formData: {
					name: '王哦哦',
					phone: '18722223333',
					sex: '',
					card_id: '120223444455556666',
					birthday: '1991-01-01',
					age: '11',
					email: '12',
					address: '12'
				},
				genderOptions: [
					{ label: '男', value: '2' },
					{ label: '女', value: '1' }
				],
				genderIndex: ""
			}
		},
		methods: {
			// 处理性别选择
			handleGenderChange(e) {
				const index = e.detail.value;
				this.genderIndex = this.genderOptions[index].label;
				this.formData.sex = this.genderOptions[index].value;
			},
			
			// 处理身份证号失焦事件
			handleIdCardBlur() {
				if (this.formData.card_id.length === 18) {
					// 从身份证提取生日
					const year = this.formData.card_id.substring(6, 10);
					const month = this.formData.card_id.substring(10, 12);
					const day = this.formData.card_id.substring(12, 14);
					this.formData.birthday = `${year}-${month}-${day}`;
					
					// 计算年龄
					const today = new Date();
					const birthDate = new Date(year, month - 1, day);
					let age = today.getFullYear() - birthDate.getFullYear();
					const monthDiff = today.getMonth() - birthDate.getMonth();
					if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
						age--;
					}
					this.formData.age = age.toString();
				}
			},
			
			// 处理生日选择
			handleBirthdayChange(e) {
				this.formData.birthday = e.detail.value;
				// 根据选择的生日计算年龄
				const today = new Date();
				const birthDate = new Date(e.detail.value);
				let age = today.getFullYear() - birthDate.getFullYear();
				const monthDiff = today.getMonth() - birthDate.getMonth();
				if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
					age--;
				}
				this.formData.age = age.toString();
			},
			
			// 上一步
			prevStep() {
				uni.navigateBack();
			},
			
			// 下一步
			nextStep() {
				// 表单验证
				if (!this.validateForm()) {
					return;
				}
				uni.setStorageSync('userInfo', this.formData)
				// 保存数据并跳转到确认页
				uni.navigateTo({
					url: '/pages/shops/detection/notice/notice'
				});
			},
			
			// 表单验证
			validateForm() {
				if (!this.formData.name) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					});
					return false;
				}
				if (!this.formData.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return false;
				}
				if (!/^1\d{10}$/.test(this.formData.phone)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					});
					return false;
				}
				if (!this.formData.sex) {
					uni.showToast({
						title: '请选择性别',
						icon: 'none'
					});
					return false;
				}
				if (!this.formData.card_id) {
					uni.showToast({
						title: '请输入身份证号',
						icon: 'none'
					});
					return false;
				}
				if (!this.formData.email) {
					uni.showToast({
						title: '请输入邮箱',
						icon: 'none'
					});
					return false;
				}
				if (!this.formData.address) {
					uni.showToast({
						title: '请输入地址',
						icon: 'none'
					});
					return false;
				}
				// 更多验证...
				return true;
			}
		}
	}
</script>

<style>
	.container {
		padding: 20rpx;
		background-color: #f8f8f8;
		min-height: 100vh;
	}
	
	.progress-section {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx 20rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	}
	
	.form-section {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	}
	
	.section-title {
		margin-bottom: 30rpx;
	}
	
	.title-text {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		position: relative;
		padding-left: 24rpx;
	}
	
	.title-text::before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 6rpx;
		height: 28rpx;
		background-color: #2979ff;
		border-radius: 3rpx;
	}
	
	.form-item {
		margin-bottom: 30rpx;
	}
	
	.label {
		display: block;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 12rpx;
	}
	
	.input {
		width: 100%;
		height: 80rpx;
		background-color: #f8f8f8;
		border-radius: 8rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
	}
	
	.textarea {
		width: 100%;
		height: 160rpx;
		background-color: #f8f8f8;
		border-radius: 8rpx;
		padding: 20rpx;
		font-size: 28rpx;
	}
	
	.gender-group {
		display: flex;
		gap: 20rpx;
	}
	
	.gender-item {
		flex: 1;
		height: 80rpx;
		background-color: #f8f8f8;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s;
	}
	
	.gender-item.active {
		background-color: #e6f0ff;
		border: 1px solid #2979ff;
	}
	
	.gender-text {
		font-size: 28rpx;
		color: #333;
	}
	
	.gender-item.active .gender-text {
		color: #2979ff;
	}
	
	.picker {
		width: 100%;
		height: 80rpx;
		background-color: #f8f8f8;
		border-radius: 8rpx;
		padding: 0 20rpx;
	}
	
	.picker-text {
		line-height: 80rpx;
		font-size: 28rpx;
		color: #333;
	}
	
	.footer {
		padding: 40rpx 30rpx;
		background-color: #fff;
		box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.05);
	}
	
	.btn-group {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}
	
	.btn {
		flex: 1;
		margin: 0 15rpx;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 20rpx;
		font-size: 32rpx;
		font-weight: 500;
		text-align: center;
	}
	
	.prev-btn {
		background-color: #f5f5f5;
		color: #666;
	}
	
	.next-btn {
		background: linear-gradient(to right, #2979ff, #5e96ff);
		color: #fff;
	}
	.flex-item {
		width: 50%;
		height: 200rpx;
		text-align: center;
		line-height: 200rpx;
		padding: 10px 20px;
	}
	
	.flex-item-V {
		width: 100%;
		height: 150rpx;
		text-align: center;
		line-height: 150rpx;
	}
</style> 